<template>
    <div class="home-header" :class="{ scrolled: !isAtTop }">
        <div class="logo" @click="router.push('/')">
            <img src="@/assets/svg/tubusi_w_nav_logo.svg" alt="My Icon" />
        </div>
        <ul class="nav">
            <el-link :underline="false" v-for="(item, index) in tabList" :key="index"
                >{{ item.name }}
                <div class="newStatus" v-if="item.newType">新</div>
            </el-link>
        </ul>
        <div class="login-area">
            <el-button @click="handleLogin" type="primary" class="custom-button-login">登陆</el-button>
            <el-button @click="handleLogin" type="primary" class="custom-button-register">注册</el-button>
        </div>
    </div>
</template>

<script setup>
// 检查是否滚动到页面顶部变色
const isAtTop = ref(true);
const checkScroll = () => {
    // 设置10px的缓冲区域防止抖动
    isAtTop.value = window.scrollY <= 10;
};

onMounted(() => {
    window.addEventListener("scroll", checkScroll);
});

onBeforeUnmount(() => {
    window.removeEventListener("scroll", checkScroll);
});
const tabList = ref([
    {
        name: "找设计",
        path: "/template",
        newType: true,
    },
    {
        name: "找厂家",
        path: "/template",
        newType: true,
    },
    {
        name: "案例",
        path: "/template",
        newType: false,
    },
    {
        name: "学习中心",
        path: "/template",
        newType: false,
    },
    {
        name: "AI",
        path: "/template",
        newType: false,
    },
    {
        name: "新闻",
        path: "/template",
        newType: false,
    },
    {
        name: "定价",
        path: "/template",
        newType: true,
    },
    {
        name: "帮助",
        path: "/template",
        newType: false,
    },
]);
const handleLogin = () => {};
</script>

<style lang="scss" scoped>
.home-header {
    display: flex;
    padding: 16px 40px;
    align-items: center;
    z-index: 10;
    width: 100%;
    position: fixed;
    box-sizing: border-box;
    top: 0;
    .logo {
        cursor: pointer;
        img {
            width: 200px;
            height: 28px;
        }
    }
    .nav {
        margin: 0;
        display: flex;
        align-items: center;
        margin-left: 53px;
        padding: 0;
        :deep(.el-link) {
            color: var(--white);
            list-style: none;
            margin-right: 40px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 16px;
            color: var(--white);
            line-height: 20px;
            text-align: left;
            font-style: normal;
        }
    }
    .login-area {
        margin-left: auto;
        // margin-right: 40px;
        color: var(--white);
        cursor: pointer;
    }
}
.home-header.scrolled {
    background-color: var(--black);
}
.newStatus {
    position: absolute;
    top: -9px;
    right: -19px;
    width: 24px;
    height: 18px;
    background: var(--green);
    border-radius: 9px 9px 9px 0px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: var(--white);
    line-height: 18px;
    text-align: center;
    font-style: normal;
}
.custom-button-login {
    background-color: var(--white);
    border: var(--white);
    border-radius: 8px;
    margin-left: 8px;
    color: var(--deepBlack);
    width: 64px;
    height: 32px;
    &:hover {
        background-color: var(--white);
        border: var(--white);
    }
}
.custom-button-register {
    background-color: var(--red);
    border: var(--red);
    border-radius: 8px;
    margin-left: 8px;
    width: 64px;
    height: 32px;
    &:hover {
        background-color: var(--red);
        border: var(--red);
    }
}
</style>
